<template>
    <div class="teamplate-evaluate" style="overflow-y:hidden;">
        <div class="container-pull-leftuid">
              <div id="myCarousel" class="carousel slide" data-ride="carousel" ata-interval="2000"  >
                            <!-- 轮播（Carousel）指标 -->
                            <ol class="carousel-indicators" >
                                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                <li data-target="#myCarousel" data-slide-to="1"></li>
                                <li data-target="#myCarousel" data-slide-to="2"></li>
                            </ol>
                            <!-- 轮播（Carousel）项目 -->
                            <div class="carousel-inner yangshi">
                                <div class="item active">
                                    <img  :src="cfg.assets+'/images/ad.jpg'" style="width:100%;" alt="First slide">
                                    <div class="carousel-caption"></div>
                                </div>
                                <div class="item">
                                    <img :src="cfg.assets+'/images/ad.jpg'" style="width:100%;" alt="Second slide">
                                    <div class="carousel-caption"></div>
                                </div>
                                <div class="item">
                                    <img :src="cfg.assets+'/images/ad.jpg'" style="width:100%;" alt="Third slide">
                                    <div class="carousel-caption"></div>
                                </div>
                            </div>
                            <!-- 轮播（Carousel）导航 -->
                            <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
                        </div>  
                         
           <div class="customer-wrap clearfix" id="shoup" style="display:none;">
                <div class="left-column">
                    <div class="top clearfix">
                        <div class="t-left">
                            <span>收银台</span>
                            <span>{{sktId}}</span>
                        </div>
                        <div class="t-right">
                            <div class="pull-left text-center">
                                <!-- <p class="f888">收款员</p>
                                        <p>张晓霞</p> -->
                                        <img :src="cfg.assets+'/images/y1.png'" alt="">
                            </div>
                            <div class="pull-left">
                                <p  class="f888"></p>
                                <p style="padding-top: 6px;">{{xiaoShouYuanP}}</p>
                            </div>
                        </div>
                    </div>
                    <div class="card-wrap">
                        <div class="card-box">
                            <div class="left">
                                <!-- <img :src="img1" alt=""> -->
                                <img :src="cfg.assets+'/images/logo2.png'" alt="">
                                <span>{{lastname}}</span>
                            </div> 
                           <div class="msg">
                                <p>
                                    <span>姓名:</span>{{huiYuanP.kkhname}}</p>
                                <p>
                                    <span>积分:</span>{{huiYuanP.jifen}}</p>
                                <p>
                                    
                                    <span>手机号:</span>{{huiYuanP.callnum}}</p>
                                
                            </div>
                        </div>
                    </div>
                    <div class="table-list hideP" style="height:252px;overflow-y:scroll;border-radius: 3px;" >
                        <table width="100%" style="table-layout:fixed" >
                            <tr >
                                <th style="padding-left:5px" width='60%'>商品名称</th>
                                <th width='15%'>数量</th>
                                <th  width='25%' style="text-align:right;padding-right:5px" >实收金额</th>
                            </tr>
                            <tr v-for="items in shangPingP">
                                <td>{{items.spmch}}</td>
                                <td>{{items.shl}}</td>
                                <td style="text-align:right">{{items.sshje | formatPrice}}</td>
                            </tr>

                        </table>
                    </div>
                    <!-- <div class=" b-table table-wrap" style="border-radius: 3px;padding:0px;margin-bottom:10px;">
                      <table class="table table-striped form-table" cellpadding="0" cellspacing="0">
                            <colgroup width="100%">
                                <col width="165">
                                <col width="50">
                                <col width="70">
                                <col width="0">
                            </colgroup>
                            <thead>
                              <tr>
                                <th>商品名称</th>
                                <th>数量</th>
                                <th>实收金额</th>
                                <th></th>
                              </tr>
                            </thead>
                      </table>
                        <div class="table-box" style="height:252px;overflow-x:hidden;" id="j_table_scroll">
                            <table class="table table-striped form-table" cellpadding="0" cellspacing="0" style="table-layout: fixed;">
                                <colgroup width="100%">
                                    <col width="165">
                                    <col width="50">
                                    <col width="70">
                                </colgroup>
                                <tbody>
                                    <tr v-for="items in shangPingP">
                                        <td>{{items.spmch}}</td>
                                        <td>{{items.shl}}</td>
                                        <td style="text-align:right">{{items.sshje | formatPrice}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div> -->
                   
                    <div class="detail-wrap" style="font-size: 20px;padding-left: 20px;padding-top: 6px;padding:0px;border-radius: 3px;height: 120px;padding: 5px; ">
                        <ul style="margin-bottom:0px;">
                            <li class="" style="clear:both;">
                                <div class="" style="float:left;">应收金额:</div>
                                <div class=" orange" style="float:right;"><p >{{yingshouP | formatPrice}}</p></div>
                            </li>
                            <li class="" style="clear:both;">
                                <div class="" style="float:left;">实收金额:</div>
                                <div class=" purple" style="float:right;"><p >{{shishouP | formatPrice}}</p></div>
                            </li>
                            <li class="" style="clear:both;">
                              <div class="" style="float:left;">优惠金额:</div>
                             <div class=" purple" style="float:right;"><p >{{youHuiP | formatPrice}}</p></div>
                            </li>
                        </ul>
                        
                    </div>
                    <div class="detail-wrap" style="height:124px;border-radius: 3px;padding-left: 10px;padding:0px;margin-top:15px" >
                                        <div class="t" style="padding-left: 10px;">微信公众号</div>
                                        <p class="img" style="width:50px;height:50px;padding-left: 5px;">
                                            <img :src="cfg.assets+'/images/erweima.jpg'" alt="" style="width:100px;height:100px">
                                        </p>
                                        <div style="float:right;display:inline-block;margin-right:  44px; margin-top: -36px;font-size:25px" >
                                            <p>扫一扫</p>
                                            <p style="margin-bottom:5px">成为会员</p>
                         </div>
                        </div>
                        
                </div>
                 <div class="r-container" v-show="successP">
                    <div class="evaluate-wrap" >
                       <div class="title">
                                    <div class="icon-portrait"><img :src="cfg.assets+'/images/y1.png'" alt=""></div>
                                    <div class="name">收银员 {{xiaoShouYuanP}}</div>
                                    <div class="msg">请您对我的服务进行评价</div>
                       </div>
                       <div class="evaluate-list">
                                    <!-- <ul class="clearfix text-center">
                                        <li  v-for="(item,index) in list" :class="{on:index==tabIdx}" @click="onEvaluate(index)">
                                            <div class="box">
                                                <div>
                                                    <div class="list-icon"><img :src="item.image" alt=""></div>
                                                    <div class="text">{{item.text}}</div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul> -->
                            <ul class="clearfix text-center">
                                <li @click="onEvaluate" style="width:20%" :data-index='indexs.idx1' :class="{on:indexs.idx1==tabIdx}">
                                    <div class="box">
                                        <div>
                                            <div class="list-icon"><img :src="cfg.assets+'/images/biaoqing001.png'" alt=""></div>
                                            <div class="text">非常满意</div>
                                        </div>
                                    </div>
                                </li>
                                <li  @click="onEvaluate" style="width:20%" :data-index='indexs.idx2' :class="{on:indexs.idx2==tabIdx}">
                                    <div class="box">
                                        <div>
                                            <div class="list-icon"><img :src="cfg.assets+'/images/biaoqing002.png'" alt=""></div>
                                            <div class="text">满意</div>
                                        </div>
                                    </div>
                                </li>
                                <li  @click="onEvaluate" style="width:20%" :data-index='indexs.idx3' :class="{on:indexs.idx3==tabIdx}">
                                    <div class="box">
                                        <div>
                                            <div class="list-icon"><img :src="cfg.assets+'/images/biaoqing003.png'" alt=""></div>
                                            <div class="text">一般般</div>
                                        </div>
                                    </div>
                                </li>
                                <li @click="onEvaluate" style="width:20%" :data-index='indexs.idx4' :class="{on:indexs.idx4==tabIdx}">
                                    <div class="box">
                                        <div>
                                            <div class="list-icon"><img :src="cfg.assets+'/images/biaoqing004.png'" alt=""></div>
                                            <div class="text">不满意</div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div> 
                        
                    </div>
                </div>
                <div class="r-container" v-show="weifukuan">
                    <div class="evaluate-wrap" >
                       <div id="myCarousel" class="carousel slide" data-ride="carousel" ata-interval="2000">
                            <!-- 轮播（Carousel）指标 -->
                            <ol class="carousel-indicators" >
                                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                <li data-target="#myCarousel" data-slide-to="1"></li>
                                <li data-target="#myCarousel" data-slide-to="2"></li>
                            </ol>
                            <!-- 轮播（Carousel）项目 -->
                            <div class="carousel-inner yangshi1">
                                <div class="item active">
                                    <img :src="cfg.assets+'/images/ad.jpg'" style="width:100%;" alt="First slide">
                                    <div class="carousel-caption"></div>
                                </div>
                                <div class="item">
                                    <img :src="cfg.assets+'/images/ad.jpg'" style="width:100%;" alt="Second slide">
                                    <div class="carousel-caption"></div>
                                </div>
                                <div class="item">
                                    <img :src="cfg.assets+'/images/ad.jpg'" style="width:100%;" alt="Third slide">
                                    <div class="carousel-caption"></div>
                                </div>
                            </div>
                            <!-- 轮播（Carousel）导航 -->
                            <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
                        </div>
                    </div>
                </div>
                
            </div>
             
        </div>
        
    </div>

</template>

<script>
    import bus from '../api/eventBus';
    import {
        setUi,
        setUserCode,
        setPopStatus
    } from '../vuex/actions'
    import {
        ui,
        userCode,
        popStatus
    } from '../vuex/getters'
    export default {
        components: {},
        data() {
            return {
                huiYuanP: {},
                shangPingP: {},
                xiaoShouYuanP: '',
                yingshouP: '',
                shishouP: '',
                youHuiP: 0,
                tabIdx: 0,
                timer2: '',
                successP: false,
                weifukuan: true,
                shoukuanhzhongS: '',
                shoukuanhzhongY: '',
                fy: '',
                indexs: {
                    idx1: 0,
                    idx2: 1,
                    idx3: 2,
                    idx4: 3
                },
                sktId: ''
            }
        },
        watch: {

        },
        vuex: {

        },
        methods: {
            onEvaluate(e) {
                let me = this;
                let {
                    index
                } = e.currentTarget.dataset;
                me.tabIdx = index;
                me.num = index;
                if (me.num == 0) {
                    var parma = {
                        lshh: me.shangPingP[0].lshh,
                        sktid: me.sktId,
                        shky: me.shangPingP[0].shky,
                        hw: me.shangPingP[0].hw,
                        cardid: me.shangPingP[0].cardid,
                        staffid: "",
                        isverygood: 1,
                        isgood: 0,
                        isok: 0,
                        isno: 0,
                    }
                } else if (me.num == 1) {
                    var parma = {
                        lshh: me.shangPingP[0].lshh,
                        sktid: me.sktId,
                        shky: me.shangPingP[0].shky,
                        hw: me.shangPingP[0].hw,
                        cardid: me.shangPingP[0].cardid,
                        staffid: "",
                        isverygood: 0,
                        isgood: 1,
                        isok: 0,
                        isno: 0,
                    }
                } else if (me.num == 2) {
                    var parma = {
                        lshh: me.shangPingP[0].lshh,
                        sktid: me.sktId,
                        shky: me.shangPingP[0].shky,
                        hw: me.shangPingP[0].hw,
                        cardid: me.shangPingP[0].cardid,
                        staffid: "",
                        isverygood: 0,
                        isgood: 0,
                        isok: 1,
                        isno: 0,
                    }
                } else if (me.num == 3) {
                    var parma = {
                        lshh: me.shangPingP[0].lshh,
                        sktid: me.sktId,
                        shky: me.shangPingP[0].shky,
                        hw: me.shangPingP[0].hw,
                        cardid: me.shangPingP[0].cardid,
                        staffid: 1,
                        isverygood: 0,
                        isgood: 0,
                        isok: 0,
                        isno: 1,
                    }
                }
                console.log(parma, "点击评价传参")
                $.ajax({
                    type: 'GET',
                    url: me.cfg.api + '/TmpPosMxlsController/insertPRating',
                    dataType: 'json',
                    data: parma
                }).done(data => {
                    console.log(data, "点击评价传参成功");
                    if (data.code == 200) {
                        layer.msg("评价成功，谢谢！");
                    }
                })
            },
            onSurname(e) { // 姓氏筛选
                let me = this;
                let fullname = me.huiYuanP.kkhname;
                console.log(fullname);
                let hyphenated = me.biz.surname;
                let vLength = fullname.length;

                let lastname = '',
                    firstname = ''; //前为姓,后为名
                if (vLength > 2) {
                    let preTwoWords = fullname.substr(0, 2); //取命名的前两个字,看是否在复姓库中
                    if ($.inArray(preTwoWords, hyphenated) > -1) { //表示存在
                        me.lastname = preTwoWords;
                        me.firstname = fullname.substr(2);
                    } else {
                        me.lastname = fullname.substr(0, 1);
                        me.firstname = fullname.substr(1);
                    }
                } else if (vLength == 2) { //全名只有两个字时,以前一个为姓,后一下为名
                    me.lastname = fullname.substr(0, 1);
                    me.firstname = fullname.substr(1);
                } else {
                    me.lastname = fullname;
                }

                return [lastname, firstname];
            },
        },
        mounted() {
            let me = this;
            me.lshhP = "";
            // $("#j_table_scroll").scrollTop($("#j_table_scroll")[0].scrollHeight);
            // alert($("#j_table_scroll")[0].scrollHeight);
            //获取屏幕真实高度
            var winHeight = $(window).outerHeight();
            $(window).resize(function(){
                let winHeight = $(window).outerHeight();
                $('.left-column').css({
                "height": winHeight
            });
            $('.yangshi1').find('.item').find('img').css({
                "height": winHeight
            });
            $('.yangshi').find('.item').find('img').css({
                "height": winHeight
            });
            })
            $('.left-column').css({
                "height": winHeight
            });
            $('.yangshi1').find('.item').find('img').css({
                "height": winHeight
            });
            $('.yangshi').find('.item').find('img').css({
                "height": winHeight
            });
            //展示的会员购物信息
            setInterval(bb, 1000);

            function bb() {
                console.log("定时器")
                me.sktId = localStorage.getItem("sktId");
                $.ajax({
                    type: 'get',
                    url: me.cfg.api + '/TmpPosMxlsController/selectLsMxNew',
                    dataType: 'json',
                    data: {
                        sktid: me.sktId
                    }
                }).done(data => {
                    if (data.code == 200) {
                        //会员信息
                        if (!data.data.Huiyuan) {
                            for (let i in me.huiYuanP) {
                                me.huiYuanP = {};
                                me.lastname='';
                                //    me.$set(me.huiYuanP, me.huiYuanP[i], '');
                            }

                        } else {

                            me.huiYuanP = data.data.Huiyuan;

                            me.onSurname();

                        }
                        if (data.data.lsmxList) {
                            for (var k = 0; k < data.data.lsmxList.length; k++) {
                                me.xiaoShouYuanP = data.data.lsmxList[0].xshy
                            }
                        }
                        if (data.data.zt == 2) {
                            //购买商品
                            console.log("2222222222222");
                            me.successP = false;
                            me.weifukuan = true;
                            me.tabIdx = 0;
                            $("#myCarousel").hide();
                            $("#shoup").show();
                            me.shangPingP = data.data.lsmxList;
                            me.lshhP = data.data.lsmxList[0].lshh;
                            console.log(me.lshhP, "流水号")
                            me.shangPingP = data.data.lsmxList;
                            me.shishouP = data.data.sum.sshjehj;
                            me.yingshouP = data.data.sum.ysjehj;
                            me.youHuiP = (me.yingshouP - me.shishouP).toFixed(2);
                        } else if (data.data.zt == 3) {
                            //点击付款
                            console.log(me.successP, me.weifukuan, '333333333333333');
                            for (k = 0; k < data.data.hz.length; k++) {
                                me.shishouP = data.data.hz[k].sshje;
                                me.yingshouP = data.data.hz[k].ysje;
                                me.youHuiP = (me.yingshouP - me.shishouP).toFixed(2);
                            }

                            me.successP = true;
                            me.weifukuan = false;
                        } else if (data.data.zt == 4) {
                            //购买商品成功
                            console.log(44444444444444444);
                            let me = this;

                        } else if (data.data.zt == 1) {

                            console.log(111111111111111111111);
                            $("#myCarousel").show();
                            $("#shoup").hide();
                        }
                    }

                });

            }

        }

    }
</script>